<template>
  <view class="theme">
    <view
      v-for="(item, themeIndex) in list"
      :key="item._id"
      class="theme__item"
    >
      <!-- 主题1 -->
      <template v-if="item.layout === 1 && item.books.length > 0">
        <view class="theme__style1">
          <h2 class="theme__title">
            <span class="theme__title-text">{{ item.name }}</span>
            <span
              v-if="item.flush"
              class="theme__flush"
              @click="handleFlush(item._id, themeIndex)"
            >
              换一换
            </span>
          </h2>
          <view class="theme__style1-books">
            <navigator
              v-for="book in item.books"
              :key="book._id"
              :class="{ 'theme__style1-books-item': true, opacity: !book }"
              :url="book._id ? `/pages/bookdetail/index?id=${book._id}` : ''"
              hover-class="none"
            >
              <LazyLoadImg
                threshold="0"
                width="100%"
                height="109"
                img-mode="aspectFit"
                :image="book.img_url"
              />
              <view class="theme__style1-books-item-name">{{ book.name }}</view>
              <view class="theme__style1-books-item-author">
                {{ book.author }}
              </view>
            </navigator>
          </view>
        </view>
      </template>
      <!-- 主题2 -->
      <template v-else-if="item.layout === 2 && item.books.length > 0">
        <view class="theme__style1">
          <h2 class="theme__title">
            <span class="theme__title-text">{{ item.name }}</span>
            <span
              v-if="item.flush"
              class="theme__flush"
              @click="handleFlush(item._id, themeIndex)"
            >
              换一换
            </span>
          </h2>
          <navigator
            v-if="item.books[0]"
            :url="`/pages/bookdetail/index?id=${item.books[0]._id}`"
            class="theme__style2-first"
            hover-class="none"
          >
            <view class="theme__style2-first-info">
              <view class="theme__style2-first-name">
                {{ item.books[0].name }}
              </view>
              <view class="theme__style2-first-des ellipsis-three">
                {{ item.books[0].des }}
              </view>
              <view class="theme__style2-first-bottom">
                <text class="theme__style2-first-bottom-author">
                  {{ item.books[0].author }}
                </text>
                <text class="theme__style2-first-classify">
                  {{ formatClassify(item.books[0].classify) || '查看详情' }}
                </text>
              </view>
            </view>
            <LazyLoadImg
              class="theme__style2-first-img"
              threshold="0"
              width="100%"
              height="109"
              img-mode="aspectFit"
              :image="item.books[0].img_url"
            />
          </navigator>
          <view class="theme__style2-books">
            <navigator
              v-for="book in backFourBooks(item.books)"
              :key="book._id"
              :class="{ 'theme__style2-books-item': true, opacity: !book }"
              :url="book._id ? `/pages/bookdetail/index?id=${book._id}` : ''"
              hover-class="none"
            >
              <LazyLoadImg
                class="theme__style2-books-item-img"
                threshold="0"
                width="100%"
                height="109"
                img-mode="aspectFit"
                :image="book.img_url"
              />
              <view class="theme__style2-books-item-name">{{ book.name }}</view>
              <view class="theme__style2-books-item-author">
                {{ book.author }}
              </view>
            </navigator>
          </view>
        </view>
      </template>
      <!-- 主题3 -->
      <template v-else-if="item.layout === 3 && item.books.length > 0">
        <view class="theme__style3">
          <h2 class="theme__title">
            <span class="theme__title-text">{{ item.name }}</span>
            <span
              v-if="item.flush"
              class="theme__flush"
              @click="handleFlush(item._id, themeIndex)"
            >
              换一换
            </span>
          </h2>
          <navigator
            v-for="book in item.books"
            :key="book._id"
            :url="book._id ? `/pages/bookdetail/index?id=${book._id}` : ''"
            :class="{ 'theme__style3-item': true, opacity: !book }"
            hover-class="none"
          >
            <view class="theme__style3-info">
              <view class="theme__style3-name">{{ book.name }}</view>
              <view class="theme__style3-des">{{ book.des }}</view>
              <view class="theme__style3-bottom">
                <text class="theme__style3-bottom-author">
                  {{ book.author }}
                </text>
                <text class="theme__style2-first-classify">
                  {{ formatClassify(book.classify) || '查看详情' }}
                </text>
              </view>
            </view>
            <LazyLoadImg
              class="theme__style3-img"
              threshold="0"
              width="100%"
              height="109"
              img-mode="aspectFit"
              :image="book.img_url"
            />
          </navigator>
        </view>
      </template>
    </view>
  </view>
</template>

<script>
import LazyLoadImg from '@/components/LazyLoadImg2';
const clickTimes = []; // 记录每个主题当前的页数

export default {
  components: {
    LazyLoadImg,
  },

  data() {
    return {
      list: [],
    };
  },

  methods: {
    // 获取主题数据
    getThemes() {
      this.$http({
        method: 'GET',
        url: '/api/front/theme',
      }).then((res) => {
        if (res.ok) this.list = res.data.list;
      });
    },

    // 点击换一换
    handleFlush(themeId, themeIndex) {
      if (this.list[themeIndex].noMore) {
        uni.showToast({ title: '没有更多书籍了~', icon: 'none' });
        return;
      }
      const current = clickTimes[themeIndex] || 2;
      this.$http({
        method: 'GET',
        url: '/api/front/theme/flush',
        data: {
          page: current,
          themeId,
        },
      }).then((res) => {
        if (res.ok) {
          this.list[themeIndex].books = [...res.data.list];
          this.list[themeIndex].noMore = res.data.noMore;
          clickTimes[themeIndex] = current + 1;
        }
      });
    },

    backFourBooks(books) {
      if (books instanceof Array) {
        return books.slice(1);
      } else {
        return [];
      }
    },

    formatClassify(arr) {
      if (typeof arr === 'string') return arr;
      if (arr instanceof Array) return arr.join('、');
      return '';
    },
  },

  created() {
    this.getThemes();
  },
};
</script>

<style lang="scss">
.theme {
  // 主题标题
  &__title {
    padding: 24rpx $page-row-spacing;
    margin: 0;
    color: $font-color-title;
    font-size: 28rpx;
    border-bottom: 1rpx solid $border-color-gray;
    line-height: 32rpx;
    font-weight: 400;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;

    &-text::before {
      content: ' ';
      display: inline-block;
      width: 8rpx;
      background: $font-color-main;
      height: 32rpx;
      vertical-align: top;
      border-radius: 6rpx;
      margin-right: 16rpx;
    }
  }

  &__flush {
    font-weight: 400;
    color: $font-color-desc;
    font-size: 26rpx;
    padding: 6rpx 12rpx;
    margin-right: -12rpx;

    &:active {
      color: $font-color-title;
    }
  }

  // 主题1
  &__style1 {
    margin-top: 16rpx;
    background: #fff;

    &-books {
      padding: 20rpx $page-row-spacing;

      &-item {
        display: inline-block;
        width: 150rpx;
        margin-right: 31rpx;

        &:last-child {
          margin-right: 0;
        }

        &-img {
          width: 150rpx;
          height: 218rpx;
        }

        &-name,
        &-author {
          font-size: 26rpx;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          max-width: 150rpx;
        }

        &-name {
          color: $font-color-book-name;
        }

        &-author {
          color: $font-color-desc;
        }
      }
    }
  }

  // 主题2
  &__style2 {
    margin-top: 16rpx;
    background: #fff;

    &-first {
      border-bottom: 1px solid $border-color-gray;
      padding: 28rpx $page-row-spacing;
      overflow: hidden;
      // display: flex;
      // flex-flow: row nowrap;
      // justify-content: flex-start;
      // align-items: center;

      &-img {
        margin-right: 28rpx;
        width: 150rpx;
        height: 218rpx;
        float: left;
        margin-left: -100%;
      }

      &-info {
        float: left;
        width: 100%;
        padding-left: 178rpx;
      }

      &-name {
        color: $font-color-book-name;
        font-size: 30rpx;
        line-height: 1.5em;
      }

      &-des {
        color: $font-color-desc;
        font-size: 26rpx;
        line-height: 1.4em;
        margin-top: 10rpx;
        margin-bottom: 18rpx;
      }

      &-bottom {
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        align-items: center;
        color: $font-color-desc;
        font-size: 26rpx;

        &-author {
          max-width: 300rpx;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }

      &-classify {
        color: $font-color-desc;
        font-size: 24rpx;
        height: 40rpx;
        line-height: 40rpx;
        padding: 0px 16rpx;
        border: 1px solid $border-color-book-tag;
        border-radius: 6rpx;
      }
    }

    &-books {
      padding: 20rpx $page-row-spacing;

      &-item {
        display: inline-block;
        width: 150rpx;
        margin-right: 31rpx;

        &:last-child {
          margin-right: 0;
        }

        &-img {
          width: 150rpx;
          height: 218rpx;
        }

        &-name,
        &-author {
          font-size: 26rpx;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          max-width: 150rpx;
        }

        &-name {
          color: $font-color-book-name;
        }

        &-author {
          color: $font-color-desc;
        }
      }
    }
  }

  // 主题3
  &__style3 {
    margin-top: 16rpx;
    background: #fff;

    &-item {
      border-bottom: 1px solid $border-color-gray;
      padding: 28rpx $page-row-spacing;
      overflow: hidden;
      // display: flex;
      // flex-flow: row nowrap;
      // justify-content: flex-start;
      // align-items: center;
    }

    &-img {
      margin-right: 28rpx;
      width: 150rpx;
      height: 218rpx;
      float: left;
      margin-left: -100%;
    }

    &-info {
      float: left;
      width: 100%;
      padding-left: 178rpx;
    }

    &-name {
      color: $font-color-book-name;
      font-size: 30rpx;
      line-height: 1.5em;
    }

    &-des {
      color: $font-color-desc;
      font-size: 26rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      line-height: 1.4em;
      margin-top: 10rpx;
      margin-bottom: 16rpx;
    }

    &-bottom {
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between;
      align-items: center;
      color: $font-color-desc;
      font-size: 26rpx;

      &-author {
        max-width: 300rpx;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }

    &-classify {
      color: $font-color-desc;
      font-size: 26rpx;
    }
  }
}

.hidden {
  display: none;
}

.opacity {
  visibility: hidden;
}
</style>
